<style lang="scss" scoped>
main {
  dl {
    display: flex;
    margin: 10px;
    align-items: center;

    dd {
      margin-left: 5px;

      .doctor {
        background-color: rgb(254, 248, 215);
        color: rgb(173, 140, 96);
        padding: 2px;
        font-size: 12px;
      }

      p {
        line-height: 26px;
      }
    }
  }
}

.content {
  width: 94%;
  margin: 0 10px;
  // height: 360px;
  border-radius: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;

  p {
    line-height: 28px;
    // background-color: rgb(9, 184, 128);
  }
}
</style>
<template>
  <div v-for="(v, i) in detailList" :key="i">
    <header style="position: sticky;top: -1px;height: 35px;background-color: #fff;z-index:10">
      <van-nav-bar left-arrow :title="v.texttitle" @click-left="$router.go(-1)" />
    </header>
    <h2 style="font-weight: normal;line-height: 35px;margin: 10px;"> {{ v.texttitle }} </h2>
    <p style="font-size: 14px;margin-left: 10px; color: #666;">2024-10-16 <span style="color: orangered;"><van-icon
          name="eye-o" /> {{ v.textcount }} 次</span></p>
    <p style="margin-top: 20px;margin-left: 10px;color: #666;">病情描述：</p>
    <p style="margin-left: 10px;margin-top: 5px;font-size: 18px;"> {{ v.textdise }} </p>
    <main>
      <p style="margin-top: 25px; margin-left: 10px;font-size: 18px;">医生回答</p>
      <dl>
        <dt><img :src="v.textimage" style="width: 50px;height: 50px;
                border-radius: 50%;" alt=""></dt>
        <dd>
          <p> {{ v.doctorname }} <span class="doctor">妙手医生权威专家</span> </p>
          <p style="font-size: 13px;color: #666;"> {{ v.doctorstate }} | {{ v.doctoradministre }} </p>
          <p style="font-size: 13px;color: #666;"><span
              style="background-color: rgb(9, 184, 128);color: #fff;font-size: 12px;padding: 2px;">三级甲等</span>哈尔滨市第一医院
          </p>
        </dd>
        <dd style="margin-left: 40px;"><van-button type="primary" @click="toDoctorDetail(v)">马上提问</van-button></dd>
      </dl>
      <div class="content" style="padding: 10px;">
        <h4 style="font-size: 18px;">病情分享</h4>
        <p>
          <van-text-ellipsis rows="4" style="font-size: 15px;" :content="v.textdescword" expand-text="展开"
            collapse-text="收起" />
        </p>
        <h4 style="font-size: 18px;">意见建议</h4>
        <p>
          <van-text-ellipsis rows="4" style="font-size: 15px;" :content="v.doctordescword" expand-text="展开"
            collapse-text="收起" />
        </p>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { ListDatagete } from '../../Type/indeType'
const route = useRoute()
const id = route.params.id
const detailList = ref()
const router = useRouter()
const getDetail = async () => {
  const res = await axios.get('/api/book/detail', { params: { id: id } })
  detailList.value = res.data.data
  console.log(detailList)
}
const toDoctorDetail = (v: ListDatagete) => {
  router.push('/doctordetail?id=' + v.doctorid)
}
getDetail()
</script>
